<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 v-text="msg"></h1>
    <h1 v-text="msg"></h1>
    <h1 v-text="msg"></h1>
    <p v-text="msg"></p>
    <hr>
    <h1 v-text="info"></h1>
    <h1 v-text="info"></h1>
    <h1 v-text="info"></h1>

</body>
<script>
    // MVVM :  dataModel 数据模型  viewModel 视图模型  view-model 数据视图控制器
    let _msg = "测试文本msg";
    let _info = "测试文本info";
    let data = {}

    // view-model
    let msgDoms = document.querySelectorAll("[v-text=msg]")
    let infoDoms = document.querySelectorAll("[v-text=info]")

    // let data =  Object.defineProperty({})
    function initMsgDom(){
        msgDoms.forEach((dom)=>{
            dom.textContent = data.msg;
        })
    }
    Object.defineProperty(data,"msg",{
        configurable:true,
        enumerable:true,
        get(){
            return _msg;
        },
        set(nv){
            _msg = nv;
            initMsgDom();
        }
    })
    initMsgDom();

    function initInfoDom(){
        infoDoms.forEach((dom)=>{
            dom.textContent = data.info;
        })
    }
    Object.defineProperty(data,"info",{
        configurable:true,
        enumerable:true,
        get(){
            return _info;
        },
        set(nv){
            _info = nv;
            initInfoDom();
        }
    })
    initInfoDom();
    
</script>
</html>